<template>
  <div>
    <a-form :model="formState" ref="imForm" v-bind="formItemLayout">
      <template v-for="(item,index) in formState">
        <a-form-item :name="item.configKey" :label="item.configName" :help="item.remark">
          <a-input v-model:value="item.configVal" v-if="item.compType=='input'"/>
          <ImageUpload v-model:value="item.configVal"  v-if="item.compType=='upload'" fileName="startup"></ImageUpload>
          <a-switch v-model:checked="item.configVal" v-if="item.compType=='switch'" checkedValue="1" unCheckedValue="0"/>
        </a-form-item>
      </template>
      <a-form-item :wrapper-col="{ span: 8, offset: 2 }">
        <a-button type="primary" @click="handleSubmit">保存配置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="Tab2" setup>
import {onMounted, ref} from 'vue';
import {getCommonConfig, saveCommon} from '../data/config.api';
import ImageUpload from "@/components/form/src/components/ImageUpload.vue";


const formItemLayout = {
  labelCol: {span: 2},
  wrapperCol: {span: 10},
};
const formState: any = ref([]);

onMounted(() => {
  setData()
});


/**
 * 表单初始化
 * @param data
 */
async function setData() {
  getCommonConfig({
    configType: 'common'
  }).then((data) => {
    formState.value = data
  })
}

/**
 * 表单提交
 */
async function handleSubmit() {
  saveCommon({
    commonConfig: JSON.stringify(formState.value)
  }).then(() => {

  })
}

</script>

